<template>
  <div class="container">
    <filtrate :fetchData="fetchData"></filtrate>
    <div class="content">
      <h4>新课程投资回报率</h4>
      <div id="myChart" style="width:800px;height:600px"></div>
    </div>
  </div>
</template>
<script>
  import filtrate from "../filtrate";

  export default {
    data() {
      return {
        myChart: {},
        option: {
          color: ["#0177BF"],
          title: {
            text: ""
          },
          tooltip: {},
          toolbox: {
            show: true,
            right: 20,
            feature: {
              saveAsImage: {
                //保存图片
                show: true
              }
            }
          },
          legend: {
            data: ["新课程投资回报率"]
          },
          xAxis: {
            name: "课程名称",
            data: [],
            axisLabel: {
              interval: 0,
              formatter:function(value)  
              {  
                var ret = "";//拼接加\n返回的类目项  
                var maxLength = 6;//每项显示文字个数  
                var valLength = value.length;//X轴类目项的文字个数  
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                if (rowN > 1)//如果类目项的文字大于3,  
                {  
                    for (var i = 0; i < rowN; i++) {  
                        var temp = "";//每次截取的字符串  
                        var start = i * maxLength;//开始截取的位置  
                        var end = start + maxLength;//结束截取的位置  
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                        temp = value.substring(start, end) + "\n";  
                        ret += temp; //凭借最终的字符串  
                    }  
                    return ret;  
                }  
                else {  
                    return value;  
                }  
              }
            }
          },
          yAxis: {
            name: "单位：%",
            minInterval: 1
          },

          series: [
            {
              name: "新课程投资回报率",
              type: "bar",
              barMaxWidth: 20,
              data: []
            }
          ],
          label: {
            normal: {
              show: true,
              position: "top"
            }
          },
          textStyle: {
            color: "#333"
          }
        }
      };
    },
    components: {
      filtrate
    },
    methods: {
      fetchData(time, type) {
        if (this.myChart.showLoading) {
          this.myChart.showLoading("default", { color: "#0177BF" });
        }
        let data = {
          time: time ? time : "",
          courseType: type ? type : ""
        };
        axios.post(PATH + "Dashboard/courseReturn", data).then(res => {
          this.myChart.hideLoading();
          if(!res.data.xaxis.length){
            _g.toastMsg('normal','暂无数据');
          }
          let end = 100;
          if (res.data.xaxis.length > 6) {
            end =  parseInt(6 / res.data.xaxis.length * 100);
          }
          this.myChart.setOption({
            grid: {
              bottom: "15%"
            },
            xAxis: {
              data: res.data.xaxis
            },
            series: [
              {
                data: res.data.yaxis
              }
            ],
            dataZoom: [
              {
                type: "slider",
                start: 0,
                end: end
              }
            ]
          });
        });
      },
      drawChart() {
        this.myChart = this.$echarts.init(document.querySelector("#myChart"));
        this.myChart.setOption(this.option);
      },
    },
    created() {
      let filData = Lockr.get("filData");
      if (filData) {
        this.fetchData(filData.time, filData.courseType);
      } else {
        this.fetchData();
      }
    },
    mounted() {
      this.drawChart();
      this.myChart.showLoading("default", { color: "#0177BF" });
      this.myChart.on("click", params => {
        router.push("/dashboard/courseReturnDetail/" + params.data.id);
      });
    }
  };
</script>
<style scoped>
  .container {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    min-height: 100%;
    font-size: 14px;
    overflow: hidden;
  }
  .content > h4 {
    text-align: center;
    border-bottom: 1px solid #f0f2f3;
    line-height: 40px;
  }
  #myChart {
    margin: 50px auto;
  }
</style>
